<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>HNavigator</title>

  <style type="text/css">
	/*margin and padding on body element
	  can introduce errors in determining
	  element position and are not recommended;
	  we turn them off as a foundation for YUI
	  CSS treatments. */
	body {
		margin:0;
		padding:0;
	}
	#header, #main, #right {
		padding: 10px;
	}
	#yui-history-iframe {
		position:absolute;
		top:0; left:0;
		width:1px; height:1px;
		visibility:hidden;
	}

  </style>

  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css" />
  <!-- Skin CSS files resize.css must load before layout.css -->
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css" />
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/layout.css" />
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css"> 

  <!-- Utility Dependencies -->
  <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
  <script src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script> 
  <script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> 
  <!-- Optional Animation Support-->
  <script src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script> 
  <!-- Optional Resize Support -->
  <script src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
  <!-- Source file for the Layout Manager -->
  <script src="http://yui.yahooapis.com/2.6.0/build/layout/layout-debug.js"></script>

  <!--script src="http://yui.yahooapis.com/2.6.0/build/history/history-debug.js"></script-->
  <script src="/yui/2.6.0/build/history/history.js"></script>

  <script src=../heurist/php/js/load-hapi.php></script>
  <script src=/jquery/jquery.js></script>
  <script src=rl.js></script>

  <script>

var TrivialList = {
	show: function(query, records) {
		$("#header").text("Trivial List");
		if (query  &&  records) {
			this.renderRecords(query, records);
		}
	},

	recordsLoaded: function(query, records) {
		this.renderRecords(query, records);
	},

	renderRecords: function(query, records) {
		if (query === "user:87") {
			HNavigator.load("user:87 t:137");
		}
		$("#main").empty().html(
			"<p><b>query=</b> \"" + query + "\"</p>" +
			"<p>" + records.length + " records</p><br>");
		for (var i = 0, l = records.length; i < l; ++i) {
			$("#main").append("<p>" + records[i].getTitle() + "</p>");
		}
	}
};

var ReverseList = {
	show: function(query, records) {
		$("#header").text("Reverse List");
		if (query  &&  records) {
			var that = this;
			setTimeout(function() {
				that.renderRecords(query, records);
			}, 0);
		}
	},

	recordsLoaded: function(query, records) {
		this.renderRecords(query, records);
	},

	renderRecords: function(query, records) {
		$("#main").empty().html(
			"<p><b>query=</b> \"" + query + "\"</p>" +
			"<p>" + records.length + " records</p><br>");
		for (var i = records.length - 1; i >= 0; --i) {
			$("#main").append("<p>" + records[i].getTitle() + "</p>");
		}
	}
};


(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

	Event.onDOMReady(function() {
		var layout = new YAHOO.widget.Layout({
			units: [
				{ position: 'top', header: 'header', height: 80, body: 'header', gutter: '5px' },
				{ position: 'center', body: 'main', gutter: '5px', scroll: true },
				{ position: 'right', header: 'right', width: 400, resize: true, body: 'right', gutter: '5px', collapse: true, collapseSize: 30, scroll: true, animate: true }
			]
		});
		layout.render();

		var m = {
			"list": TrivialList,
			"reverse": ReverseList
		};
		HNavigator.init({
			ops: "q(user:87)|r(1)|u(id:1,2,3)",
			filters: "t:1",
			views: "list,reverse,graph"
		});
    });

})();

  </script>
 </head>

 <body class=yui-skin-sam>

  <iframe id=yui-history-iframe src=../img/hlogo-tiny.png></iframe>
  <input id=yui-history-field type=hidden></input>

  <div id=header></div>
  <div id=main>
   <table>
    <tr><td>ops </td><td id=ops></td></td>
    <tr><td>filters &nbsp;&nbsp;</td><td id=filters></td></td>
    <tr><td>views </td><td id=views></td></td>
   </table>
  </div>
  <div id=right>
   <p><a href=# onclick="YAHOO.util.History.navigate('ops', 'q(user:87)'); return false;">YAHOO.util.History.navigate('ops', 'q(user:87)')</a></p>
   <p><a href=# onclick="YAHOO.util.History.navigate('ops', 'q(user:87)|r(1)'); return false;">YAHOO.util.History.navigate('ops', 'q(user:87)|r(1)')</a></p>
   <p><a href=# onclick="YAHOO.util.History.navigate('ops', 'q(user:87)|r(1)|f(tag:cycling)'); return false;">YAHOO.util.History.navigate('ops', 'q(user:87)|r(1)|f(tag:cycling)')</a></p>
   <br><br>
   <p><a href=# onclick="YAHOO.util.History.navigate('filters', ''); return false;">YAHOO.util.History.navigate('filters', '')</a></p>
   <p><a href=# onclick="YAHOO.util.History.navigate('filters', 'type:1'); return false;">YAHOO.util.History.navigate('filters', 'type:1')</a></p>
   <p><a href=# onclick="YAHOO.util.History.navigate('filters', 'type:1|tag:moo'); return false;">YAHOO.util.History.navigate('filters', 'type:1|tag:moo')</a></p>
   <br><br>
   <p><a href=# onclick="YAHOO.util.History.multiNavigate({ops: 'q(user:1)', filters: 'tag:moo'}); return false;">YAHOO.util.History.multiNavigate({ops: 'q(user:1)', filters: 'tag:moo'})</a></p>
  </div>

 </body>
</html>

